<template>
    <div class="DM mainView">
        <div class="onLineNum">
            <el-menu theme="dark"
                     class="el-menu-demo"
                     mode="horizontal">
                <el-tooltip class="item"
                            effect="dark"
                            content="总人数"
                            placement="top-start">
                    <el-menu-item index="1">总人数：{{infoStudent.length}}人</el-menu-item>
                </el-tooltip>
                <el-tooltip class="item"
                            effect="dark"
                            content="在线人数"
                            placement="top-start">
                    <el-menu-item index="2">在线人数：{{0}}人</el-menu-item>
                </el-tooltip>
                <el-tooltip class="item"
                            effect="dark"
                            content="离线人数"
                            placement="top-start">
                    <el-menu-item index="3">离线人数：{{infoStudent.length - 0}}人</el-menu-item>
                </el-tooltip>
            </el-menu>
        </div>

        <el-row class="avatarWarp"
                :gutter="18">
            <draggable @end="SettingPos"
                       v-model="infoStudent"
                       class="draggableWarp">
                <div :style="StuIcon"
                     class="DM-item"
                     v-for="(val, index) in infoStudent"
                     :key="val.id"
                     v-show="showStuIcon">
                    <span v-show="OnLineStu.indexOf(val.UserCode) == -1"
                          class="onLineMadel"></span>
                    <div class="imgWarp"
                         :style="StuHead">
                        <img :src="picSrc + val.Head"
                             class="image">
                    </div>
                    <span class="StuName">{{val.UserName}}</span>
                </div>
            </draggable>
        </el-row>
        <div class="alos-scroll">
            <div @mousedown="DMscroll($event)" @touchstart="DMscroll($event)" class="scrollBar"></div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {mapGetters, mapActions} from 'vuex'
    import draggable from 'vuedraggable'
    import axios from 'axios'
    import store from '../store/'

    export default {
        name: "DM",
        computed: {
            ...mapGetters([
                'picSrc',
                'infoStuPos',
                'showStuIcon',
                'USERINFO',
                'enterClassID',
                'infoStudent'
            ]),
            StuIcon() {
                var _this = this
                return {
                    width: $('.DM-item').width(($('.draggableWarp').width() - _this.infoStuPos.ColNum * 10) / _this.infoStuPos.ColNum - 1 + 'px'),
                    height: $('.DM-item').height(($('.draggableWarp').height() - 50) / 5 - 1 + 'px')
                }
            },
            StuHead() {
                return {
                    width: $('.imgWarp').width($('.imgWarp').height())
                }
            },
            OnLineStu() {

                return this.OnLineStudent;

            },
            infoStudent: {
                get() {
                    return this.$store.state.mutations.infoStudent
                },
                set(value) {
                    this.$store.commit('upinfoStudent', value)
                }
            }
        },
        components: {
            draggable,
        },
        data() {
            return {
                connected: 0,//已连接人数
                count: 39,//总人数
                colNum: 3,
                OnLineStudent: OnLineStudent
            }
        },
        methods: {
            DMscroll(event){
                var soroll = document.getElementsByClassName('scrollBar')[0];
                var box = document.getElementsByClassName('avatarWarp')[0];
                var oP = document.getElementsByClassName('draggableWarp')[0];
                if (event.type == 'touchstart') {
                    var disY = event.touches[0].clientY - soroll.offsetTop;
                    $(document).on('touchmove', function (ev) {
                        var t = ev.originalEvent.targetTouches[0].clientY - disY
                        //计算滚动条移动范围
                        if (t < 0) {
                            t = 0
                        }
                        if (t > box.offsetHeight - soroll.offsetHeight) {//移动的最大范围
                            t = box.offsetHeight - soroll.offsetHeight
                        }
                        //计算移动比率
                        var move_rate = t / (box.offsetHeight - soroll.offsetHeight);
                        //赋值
                        soroll.style.top = t + 'px';
                        //移动p标签
                        oP.style.top = -(oP.offsetHeight - box.offsetHeight) * move_rate + 'px';
                    })
//                    document.touchend = function () {
//                        document.touchmove = null;
//                    };
                    $(document).on('touchend',function () {
                        $(document).on('touchmove').unbind()
                    })
                }

                if (event.type == 'mousedown') {
                    //记录偏移 鼠标坐标--soroll.offsetLeft
                    var disY = event.clientY - soroll.offsetTop;
                    document.onmousemove = function (ev) {
                        ev = ev || window.event;
                        var t = ev.clientY - disY;
                        //计算滚动条移动范围
                        if (t < 0) {
                            t = 0
                        }
                        ;
                        if (t > box.offsetHeight - soroll.offsetHeight) {//移动的最大范围
                            t = box.offsetHeight - soroll.offsetHeight
                        }
                        //计算移动比率
                        var move_rate = t / (box.offsetHeight - soroll.offsetHeight);
                        //赋值
                        soroll.style.top = t + 'px';
                        //移动p标签
                        oP.style.top = -(oP.offsetHeight - box.offsetHeight) * move_rate + 'px';
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                    };
                }
            },
            SettingPos() {
                var _this = this

                function SequStduIds() {
                    var StuPosArr = [];

                    for (var i = 0; i < _this.infoStudent.length; i++) {
                        StuPosArr.push(_this.infoStudent[i].ID)
                    }

                    return StuPosArr.join(',');
                }

                var string = SequStduIds()

                var loading = layer.load(2, {
                    shade: [0.00001, '#fff']
                });

                axios({
                    method: "POST",
                    url: 'api/SitPosSetting/UpdateSitPosSetting' + '?sk=' + store.state.mutations.getToken,
                    data: {
                        TeacherId: _this.USERINFO.ID,
                        ClassId: _this.enterClassID,
                        ColNum: _this.infoStuPos.ColNum,
                        SequStduIds: string
                    }
                }).then(function (res) {
                    layer.close(loading)
                    layer.msg('座位调整成功', {time: 1000});
                });


//            axios({
//                method: "POST",
//                url: 'api/ReExam/GetReExamByLessionID'+'?sk=' + store.state.mutations.getToken,
//                 data: {
//                      LessionID: 747,
//                      TeacherID : 5386,
////                     ResourceID: 5386,
//                      ExamTime:new Date(),
//                  //    ExamPiont: 123,
//                  //    RecordTime:new Date()
//
//                 }
//            }).then(function (res) {
//
//                console.log(res)
//                layer.close(loading)
//                layer.msg('推题', { time: 400 });
//            });
            }
        },
        mounted() {
            var _this = this;
            axios({
                method: "GET",
                url: '../src/assets/col.json',
                baseURL: ''
            }).then(function (res) {
                _this.colNum = 24 / res.data.col;
                GetOnlineUser()
            });


            window.onresize = function () {
                $('.DM-item').height(($('.draggableWarp').height() - 50) / 5 + 'px')
                $('.DM-item').width(($('.draggableWarp').width() - _this.infoStuPos.ColNum * 10) / _this.infoStuPos.ColNum + 'px')
                //                width: $('.imgWarp').width($('.imgWarp').height())
            }

        }
    }
</script>
<style lang="scss">
    .alos-scroll {
        /*background-color: #f5f5f5;*/
        /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/
        height: 100%;
        position: absolute;
        width: 30px;
        border-radius: 15px;
        right: -30px;
        top: 50px;
    }

    .scrollBar {
        background-color: rgba(0, 0, 0, 0.2);
        height: 50%;
        position: absolute;
        width: 30px;
        border-radius: 15px;
        top: 0;
    }
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../assets/css/public.scss';

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .DM {
        height: 100%;
        position: relative;
        top: -50px;
        .onLineNum {
            height: 50px;
            .el-menu-demo {
                height: 100%;
                overflow: hidden;
                background: transparent;
                li {
                    height: 100%;
                    line-height: 50px;
                    color: #333;
                }
                li:hover {
                    color: #fff;
                }
            }
        }

        .avatarWarp {
            height: 98%;
            overflow: hidden;
            .draggableWarp {
                min-height: 100%;
                position: relative;
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                overflow: auto;
                .DM-item {
                    position: relative;
                    border-radius: 10px;
                    overflow: hidden;
                    /*box-shadow: 0 0 5px rgba(0, 0, 0, .6);*/
                    margin: 5px;
                    .onLineMadel {
                        display: block;
                        border-radius: 10px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, .6);
                    }
                    .imgWarp {
                        /*border-radius: 50%;*/
                        overflow: hidden;
                        margin: 5px auto;
                        height: 70%;
                        img {
                            height: 100%;
                            display: block;
                            /*width: 100%;*/
                            margin: 0 auto
                        }
                    }
                    .StuName {
                        display: block;
                        text-align: center;
                        font-weight: bold;
                        font-size: 16px;
                        height: 30%;
                        color: #2e8ded;
                    }
                }
            }
        }
    }

    .mainView::-webkit-scrollbar {
        width: 0px
    }
</style>